---
title: Link
description: A Link navigates the user to a different url.
docType: Demo
docGroup: Components
group: Navigation
components: [Link]
---

# Link

A `Link` navigates the user to a different url.

## Simple Link

```demo source="./SimpleLinkExample.tsx"

```

## Link with Icon

If a link contains an icon, it can be centered vertically by enabling the `flex`
prop. Just note that links will no longer correctly line wrap while rendered
within paragraphs of text if this is enabled.

```demo source="./LinkWithIconExample.tsx"

```

## Button Styled Link

To create a link that appears like a button, use the `button` styling utility
function.

```demo source="./ButtonStyledLinkExample.tsx"

```

## Third-party Routing Libraries

If your application uses [Next.js](https://nextjs.org/),
[react-router](https://github.com/remix-run/react-router),
[@reach/router](https://github.com/reach/router), or some other framework for
routing, do not use the `Link` component from `react-md`. Instead, use the
`link` styling utility function if the link styles are required.

This example will show how to apply it to Next.js.

```demo source="./ThirdPartyRoutingLibrariesExample.tsx" importOnly

```
